<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button>按钮</button>
    <button>按钮</button>
    <button>post按钮</button>
    <p></p>
    <script>

        let btns = document.querySelectorAll('button');
        let p = document.querySelector('p');

        btns[0].onclick = function(){
            ajax('get','http://localhost/getHeros','',(data)=>{
                // console.log(data);
                p.innerHTML = data;
            })
        }

        btns[1].onclick = function(){
            ajax('get','http://localhost/getServer',"id=12&name=laowang",(data)=>{
                alert(data);
            })
        }

        btns[2].onclick = function(){
            ajax('post','http://localhost/postServer',"username=456&pwd=xiaoli",(data)=>{
                console.log(data);
            })
        }


        function ajax(type,url,data,cb){

            let x = new XMLHttpRequest();

            if(type.toLowerCase() === 'get'){
                x.open(type,url+'?'+data)
                x.send();
            }else{
                x.open(type,url);
                x.setRequestHeader('content-type','application/x-www-form-urlencoded')
                x.send(data);
            }
            
            // x.responseType ='json';
        
            x.onreadystatechange = function(){
                if(x.readyState === 4){
                    if(x.status >= 200 && x.status<300){
                        // p.innerHTML = x.response;
                        // alert()
                        cb(x.response)
                    }else{

                    }
                }
            }
        }


        // function ajax(url,type,data,callback){
            
        // }

        /**
         * 方法名：ajax
         * 参数1：路径
         * 参数2：数据
         * 参数3：回调函数
         * */ 
        // 1. 声明ajax函数，声明三个形参
        // 2. 声明xhr对象
        // 3. 打开请求
        // 4. 设置请求头（可选）
        // 5. 将参数2数据解析成 表单格式数据 key=val&key=val
        // 6. 发送请求
        // 7. 设置响应数据类型
        // 8. 监听xhr对象就绪状态
            // 9. 判断状态码
            // 10. 执行回调（传入响应数据）
    </script>
</body>

</html>